import React, { Component } from 'react'
import {baseUrl} from '../../util/url'
import {connect} from 'react-redux'
import {IProduct} from '../../types/product'
import {NavLink} from 'react-router-dom'

interface IProps{
    location:any,
    addCar:(item:IProduct) => void
}

class Detail extends Component<IProps>{
    render() {
        let {title,price,id,types,img} = this.props.location.state;
        return (
            <div>
                <img src={baseUrl+img} alt="" style={{width:'100%',height:'200px'}}/>
                <h4>{title}</h4>
                <span>{price}</span>
                <button onClick={
                    () => {this.props.addCar(this.props.location.state)}
                }>加入购物车</button>

                <div>
                    <NavLink to="/main/car">购物车</NavLink>
                </div>
            </div>
        )
    }
}

let stateMapToProps = () => {return {}}

let dispatchMapToProps = (dispacth:any) => {
    return {
        addCar(item:IProduct){
            dispacth({type:'ADD_CAR',item})
        }
    }
}

export default connect(stateMapToProps,dispatchMapToProps)(Detail)
